<template>
  <div class="c" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
    <el-input
      v-model="retrieval"
      @input="searchFn"
      placeholder="搜索关键字"
      clearable
      style="width: 300px; margin-top: 10px"
    >
      <template slot="prepend">检索</template>
    </el-input>
    <tree
      :setting="setting"
      :nodes="nodes"
      @onClick="onClick"
      @onCreated="handleCreated"
    />
    <!-- <search @onClick="onClick" :zNodes="dataQueue" /> -->
  </div>
</template>

<script>
import { getAllCatalogAPI } from "@/api/index.js";
export default {
  name: "sidebar",
  components: {
    tree: (resolve) => require(["@/components/ztree.vue"], resolve),
    // search: (resolve) => require(["@/components/search.vue"], resolve),
  },
  data() {
    return {
      loading: true, // 加载中
      retrieval: "", // 检索内容
      timer: null, // 计时器
      dataQueue: [], // 公式合集
      ztreeObj: null, // zTree对象
      // zTree配置
      setting: {
        check: {
          enable: false,
        },
        data: {
          simpleData: {
            enable: true,
            pIdKey: "FBM",
            idKey: "GSBM",
          },
          key: {
            name: ["GSMC"],
          },
        },
        view: {
          showIcon: false,
          addHoverDom: this.addHoverDom,
          removeHoverDom: this.removeHoverDom,
          fontCss: { "font-size": "18px" }, // 样式
        },
      },
    };
  },
  created() {
    this.getAllCatalog(); // 获取公式集合目录
  },
  computed: {
    nodes: function () {
      return this.dataQueue;
    },
  },
  methods: {
    // DOM点击事件
    onClick: function (evt, treeId, treeNode) {
      console.log(treeNode);
      // 判断是否有子节点
      if (treeNode.SONFLAG === "Y") return false;
      // 判断内容类型,路由转跳
      if (treeNode.LX == "1") {
        this.$router.push(`/article/${treeNode.GSBM}`);
      } else if (treeNode.LX == "2") {
        this.$router.push(`/table/${treeNode.GSBM}`);
      } else if (treeNode.LX == "3") {
        if (treeNode.XH == "46") {
          this.$router.push(`/tableGrade46/${treeNode.GSBM}`);
        } else if(treeNode.XH == "45"){
          this.$router.push(`/checkTable/${treeNode.GSBM}`);
        }
      }
    },
    handleCreated: function (ztreeObj) {
      console.log(ztreeObj);
      // 保存zTree对象
      this.ztreeObj = ztreeObj;
      // 获取所有节点
      let nodes = ztreeObj.transformToArray(ztreeObj.getNodes());
      // 刷新时锁定到当前页面
      if (nodes.length > 0) {
        const ind = nodes.findIndex((item) => {
          return item.GSBM === this.$route.params.gsbm;
        });
        ztreeObj.selectNode(nodes[ind]);
      }
    },
    // 获取医学公式集合目录
    async getAllCatalog() {
      try {
        const res = await getAllCatalogAPI({ token: "2855ed6102590a02fd52ce00567ee9d4" });
        this.dataQueue = res.data.result;
        // 添加编号
        this.dataQueue.forEach((item) => {
          if (item.SONFLAG === "N") {
            return (item.GSMC += `(${item.GSBM})`);
          }
        });
        this.loading = false
      } catch(err) {
        this.loading = false
        console.log('错误回调',err);
      }
    },
    // 搜索
    searchFn(val) {
      if (val === "") return false;
      // 清除定时器
      clearTimeout(this.timer);
      // 防抖处理
        this.timer = setTimeout(() => {
          var nodes = this.ztreeObj.getNodesByParamFuzzy("GSMC", val, null);
          if (nodes.length > 0) {
            this.ztreeObj.selectNode(nodes[0]);
          }
        }, 700);
    },
  },
};
</script>

<style>
.c {
  /* width: 400px; */
  flex: 1;
  height: 100%;
  overflow: auto;
  margin: auto;
  border-right: solid 1px #e6e6e6;
  padding-left: 20px;
}
</style>
